<!doctype html>

<html lang="en">
<head>
	<title>TColorExample - toxiclibs.js examples</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
	<meta name="author" content="Kyle Phillips">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!-- Date: 2011-01-09 -->
	<script type="text/javascript" src="../build/toxiclibs.js"></script>
	<script type="text/javascript" src="js/raphael-min.js"></script>
	
	<body class="container_12">
	<header class="grid_12">
		<hgroup>
			<h1>Color Waves</h1>
			<h2>w/ <a href="http://raphaeljs.com">Raphael.js</a></h2>
		</hgroup>
	</header>
	<div class="grid_12" id="notepad">
	</div>
	<section id="details" class="grid_12">
		<aside id="authors" class="grid_6">
			created by <a href="http://haptic-data.com">Kyle Phillips</a>
		</aside>
		<aside id="usage" class="grid_6">
		<p><strong>Usage:</strong><br>move your mouse <em>(or finger)</em> around</p>
		</aside>
		<article id="description" class="grid_12">
		<p>
			This example shows using toxi.color.TColor with SVG and the <a href="http://raphaeljs.com" target="_blank">Raphael.js</a> library. Moving your mouse or finger around adjusts the size and color of the circles based on distance.
		</p>
		</article>
	</section>
	<footer class="grid_12"><a href="http://haptic-data.com/toxiclibsjs/">toxiclibs.js</a></footer>
	
	<script type="text/javascript">
	
	window.onload = function(e){
	
	
 		var columns = 6, rows = 4;
 		var columnWidth, rowHeight;
 		var circles = [];
 		var translateX = 100, translateY = 100;
 		var width =940;
 		var height = 600;
 		var container = document.getElementById("notepad");
		
		var notepad = Raphael(container,width,height);
		
		
		 columnWidth = width / (columns-1);
		 rowHeight = height / (rows-1);
		 
		 for(var r=0;r<rows;r++)
		 {
		     
		     for(var c=0;c<columns;c++)
		     {
		       var circle = notepad.circle(c*columnWidth+translateX,r*rowHeight+translateY,1,1);
		       circle.attr({fill: "#dddddd", "stroke": "#dddddd", "opacity":0.5,"scale": 4.0});
		       circles.push(circle); 
		     }
		   }
		   		   
		   
		document.addEventListener("mousemove",function(event)
		{
			updateFor(event.pageX,event.pageY);
		},false);
		
		document.addEventListener("touchmove",function(event){
			event.preventDefault();
			updateFor(event.touches[0].pageX,event.touches[0].pageY);
		
		},false);

		function updateFor(activeX,activeY)
		{

			var x = activeX - container.offsetLeft;
			var y = activeY - container.offsetTop;
			
			var l = circles.length;
			for(var i=0;i<l;i++)
			{
				var circle = circles[i];
				var box = circle.getBBox();
				var dx = x - box.x;
				var dy = y - box.y;
				var distance = Math.sqrt((dx * dx) + (dy * dy));
				var color = toxi.color.TColor.newHSV(distance/width,0.5,1.0);

				var rgba = "rgba("+(color.red()*255)+","+(color.green()*255)+","+(color.blue()*255)+","+color.alpha()+")";
				circle.attr({"fill": rgba, "scale":distance*0.25});
			}

		
		}
	}
	
	
	
	
	</script>

	
	</body>
</html>